ngShow ( directive in module ng )

Description

The ngShow and ngHide directives show or hide a portion of the DOM tree (HTML) conditionally based on "truthy" values evaluated within an {expression}. In other words, if the expression assigned to ngShow evaluates to a true value then the element is set to visible (via display:block in css) and if false then the element is set to hidden (so display:none). With ngHide this is the reverse whereas true values cause the element itself to become hidden.

Additionally, you can also provide animations via the ngAnimate attribute to animate the show and hide effects.

Usage

as attribute
<ANY ng-show="{expression}">
   ...
</ANY>
as class
<ANY class="ng-show: {expression};">
   ...
</ANY>

Parameters

Example

Click me:

Show: I show up when your checkbox is checked.
Hide: I hide when your checkbox is checked.
.example-show-setup, .example-hide-setup { -webkit-transition:all linear 0.5s; -moz-transition:all linear 0.5s; -ms-transition:all linear 0.5s; -o-transition:all linear 0.5s; transition:all linear 0.5s; }

.example-show-setup { line-height:0; opacity:0; padding:0 10px; } .example-show-start.example-show-start { line-height:20px; opacity:1; padding:10px; border:1px solid black; background:white; }

.example-hide-setup { line-height:20px; opacity:1; padding:10px; border:1px solid black; background:white; } .example-hide-start.example-hide-start { line-height:0; opacity:0; padding:0 10px; }

.check-element { padding:10px; border:1px solid black; background:white; } it('should check ng-show / ng-hide', function() { expect(element('.doc-example-live span:first:hidden').count()).toEqual(1); expect(element('.doc-example-live span:last:visible').count()).toEqual(1);

 input('checked').check();

 expect(element('.doc-example-live span:first:visible').count()).toEqual(1);
 expect(element('.doc-example-live span:last:hidden').count()).toEqual(1);

});